<template>
  <div class="q-pa-md">
    {{ rowKey }}
    <t-toggle v-model="columnsFilter"></t-toggle>{{ columnsFilter }}
    <t-toggle v-model="selectionToggle"></t-toggle>{{ selectionToggle }}
    <q-select v-model="selectionStr" :options="selectOpts"></q-select>
    <t-data-grid
      :selection="selectionStr"
      title="Treats"
      :rows="rows"
      v-model:columnsFilter="columnsFilter"
      :columns="columns"
      :visibleColumns="visibleColumns"
      :optColumns="optColumns"
      v-model:selected="selected"
      row-key="name"
    />
  </div>
</template>

<script>
  import { useOpts } from 't/bussiness/data-grid/use-data-grid';

  import options from './options';

  import { computed, onMounted, ref } from 'vue';
  export default {
    setup() {
      const rows = ref();

      const selectionToggle = ref(true);

      const selectionStr = ref('none');

      const selection = computed(() =>
        selectionToggle.value ? 'multiple' : 'single',
      );

      onMounted(() => {
        const response = fetch('http://localhost:3004/users').then(response => {
          response.json().then(movies => {
            rows.value = movies;
          });
        });
      });

      return {
        selectionStr: selectionStr,
        selection: selection,
        selectionToggle: selectionToggle,
        selected: ref([]),
        rowKey: options.idField,
        columnsFilter: ref(true),
        selectOpts: ['none', 'multiple', 'single'],
        optColumns: options.columns,
        ...useOpts({ optColumns: options.columns }).value, // columns,visibleColumns
        rows,
      };
    },
  };
</script>
